// https://www.cnblogs.com/CCxi/p/9449347.html
document.write('<h1>DOM</h1>');

let ul = document.createElement('ul');
ul.id = 'ul1';
let list = ['java', 'css'];
let body = document.getElementsByTagName('body')[0];
list.map((str, index) => {
  let li = document.createElement('li');
  li.innerText = str;
  ul.appendChild(li);
});
body.appendChild(ul);

let button = document.createElement('button');
button.innerText = 'click me';
button.addEventListener('click', function() {
  let ul = document.getElementById('ul1');
  let liList = document.getElementById('ul1').children;
  for (let i = 0; i < liList.length; i++) {
    if (liList[i].innerText == 'java') {
      ul.removeChild(ul.children[i]);
    }
  }
});
body.appendChild(button);

let input1 = document.createElement('input');
input1.id = 'upload';
input1.type = 'file';
input1.addEventListener('change', function() {
  console.log(input1.files);
  var reader = new FileReader();
  //读取文件,没有读取文件的过程,reader.onload是不会执行的
  // reader.readAsArrayBuffer(input1.files[0]);
  reader.readAsDataURL(input1.files[0]);
  reader.onload = e => {
    var data = e.target.result; // '...(base64编码)...'
    console.log(data);
  };
});
body.appendChild(input1);

let input2 = document.createElement('input');
input2.id = 'ajax';
input2.type = 'button';
input2.value = 'send ajax';
input2.addEventListener('click', () => {
  // 兼容ie的写法的ajax
  let request;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
  } else {
    request = new ActiveXObject('Microsoft.XMLHTTP');
  }

  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      // 成功完成
      // 判断响应结果:
      if (request.status === 200) {
        // 成功，通过responseText拿到响应的文本:
        alert(request.responseText);
      } else {
        // 失败，根据响应码判断失败原因:
        alert(request.status);
      }
    } else {
      // HTTP请求还在继续...
    }
  };
  // 发送请求:
  request.open('post', '/js/null.json');
  request.send();
});
body.appendChild(input2);

let promiseValue;

let input3 = document.createElement('input');
input3.id = 'p1';
input3.type = 'button';
input3.value = 'p1 resolve';
body.appendChild(input3);
input3.addEventListener('click', () => {
  promiseValue = 1;
  testPromise(promiseValue).then(
    resolve => {
      console.log(resolve);
    },
    reject => {
      console.log(reject);
    }
  );
});

let input4 = document.createElement('input');
input4.id = 'p2';
input4.type = 'button';
input4.value = 'p2 reject';
body.appendChild(input4);
input4.addEventListener('click', () => {
  promiseValue = 2;
  testPromise(promiseValue).then(
    resolve => {
      console.log(resolve);
    },
    reject => {
      console.log(reject);
    }
  );
});

function testPromise(promiseValue) {
  return new Promise(function(resolve, reject) {
    if (promiseValue == 1) {
      resolve('this is resolve');
    } else if (promiseValue == 2) {
      reject('this is reject');
    }
  });
}

let canvas1 = document.createElement('canvas');
canvas1.id = 'canvas1';
canvas1.width = '300';
canvas1.height = '200';
body.appendChild(canvas1);

if (canvas1.getContext) {
  console.log('你的浏览器支持Canvas!');
} else {
  console.log('你的浏览器不支持Canvas!');
}

let ctx = canvas1.getContext('2d');
ctx.clearRect(0, 0, 200, 200);
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
path.moveTo(110, 75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI * 2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI * 2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

let btn = document.createElement('button');
btn.id = 'btn1';
// btn.setAttribute('onclick', 'btnClick(event)');

btn.innerText = 'click me';

body.appendChild(btn);

btn.addEventListener('click', btnClick);

function btnClick(event) {
  if (event) {
    console.log('FireFox browers');
  } else if (window.event) {
    console.log('Chrom');
  }
}

// window.btnClick = function(event) {
//   console.log(event);
// };

function fun1() {
  setTimeout(() => {
    console.log(`fun1 函数5秒后执行`);
  }, 5000);
}

function fun2(fun1) {
  fun1();
  console.log(`fun2 函数执行`);
}

fun2(fun1);
